
// 轮播图
const data = [{
        url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg',
    },
    {
        url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg',
    },
    {
        url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg',
    },
    {
        url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg',
    },
    {
        url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg',
    }
]
const menu = document.querySelector('.menu')
const tab = document.querySelector('.box .home-tab')
const allLis = document.querySelectorAll('.tab ul li')
let timerId = null
let num = 0
const circle = document.querySelector('.circle')

for (let i = 0; i < data.length; i++) {
    const newLi = document.createElement('li')
    newLi.dataset.index = i
    circle.appendChild(newLi)
    circle.children[0].classList.add('current')
}
const img = document.querySelector('.home-banner > img')
const banner = document.querySelector('.home-banner')
timerId = setInterval(function () {
    num++
    if (num > data.length - 1) {
        num = 0
    }
    show()
}, 2000)

function show() {
    img.src = data[num].url
    document.querySelector('.circle>li.current').classList.remove('current')
    circle.children[num].classList.add('current')
}

circle.addEventListener('click', function(e){
    if(e.target.tagName === 'LI'){
        const index = e.target.dataset.index
        document.querySelector('.circle>li.current').classList.remove('current')
        e.target.classList.add('current')
        img.src = data[index].url
        num = index

    }
})
// tab栏

for(let i=0;i<allLis.length;i++){
    allLis[i].dataset.index = i
}
const menuLis = document.querySelectorAll('.menu li')
for(let i=0;i<menuLis.length;i++){
    menuLis[i].dataset.index = i
}

menu.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'LI' || e.target.tagName === 'A') {
        tab.style.display = 'block'
    }
    const type = e.target.dataset.index
    showtab(type) 
})

banner.addEventListener('mouseenter', function(){
    clearInterval(timerId)
})
banner.addEventListener('mouseleave', function(){
    clearInterval(timerId)
    tab.style.display = 'none'
    timerId = setInterval(function () {
        num++
        if (num > data.length - 1) {
            num = 0
        }
        show()
    }, 2000)
})


// 循环遍历数据生成对应的tab栏
function showtab(type){
    const tabArr = goods[type].car.map(function(e){
        const {url, name, desc, price} = e
        return `<li><div>
        <img src="${url}" alt="">
        <div class="info">
            <p class="name">${name}</p>
            <p class="desc">${desc}</p>
            <p class="price"><i>¥</i>${price}</p>
        </div>
        </div></li>`
    })
    document.querySelector('.tab ul').innerHTML = tabArr.join('')
}